import 'package:flutter/material.dart';
import 'package:hello_flutter/base/index.dart';
import 'dart:math' as math;

class TransformWidget extends BasePage {
  const TransformWidget({super.key});

  @override
  String getPageTitle() => 'Transform';

  @override
  Widget buildBody(BuildContext context) {
    return Center(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: [
            Container(
              color: Colors.black,
              child: Transform(
                alignment: Alignment.topRight,
                transform: Matrix4.skewX(0.3),
                child: Container(
                  padding: const EdgeInsets.all(8),
                  color: Colors.deepOrange,
                  child: const Text('Apartment for rent!'),
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 8),
              child: const Divider(),
            ),
            DecoratedBox(
              decoration: const BoxDecoration(color: Colors.red),
              child: Transform.translate(
                offset: const Offset(-20, -5),
                child: const Text('Hello world!'),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 8),
              child: const Divider(),
            ),
            DecoratedBox(
              decoration: const BoxDecoration(color: Colors.red),
              child: Transform.rotate(
                angle: math.pi / 2,
                child: const Text('Hello world!'),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 8),
              child: const Divider(),
            ),
            DecoratedBox(
              decoration: const BoxDecoration(color: Colors.red),
              child: Transform.scale(
                // scale: 1.5,
                scaleX: 1.2,
                scaleY: 1.5,
                child: const Text('Hello world!'),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 16),
              child: const Divider(),
            ),
            DecoratedBox(
              decoration: const BoxDecoration(color: Colors.red),
              child: Transform.translate(
                offset: const Offset(-20, 5),
                child: Transform.rotate(
                  angle: 0.3,
                  child: const Text('先平移再旋转'),
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 16),
              child: const Divider(),
            ),
            DecoratedBox(
              decoration: const BoxDecoration(color: Colors.red),
              child: Transform.rotate(
                angle: 0.3,
                child: Transform.translate(
                  offset: const Offset(-20, 5),
                  child: const Text('先旋转再平移'),
                ),
              ),
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 16),
              child: const Divider(),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                DecoratedBox(
                  decoration: const BoxDecoration(color: Colors.red),
                  child: Transform.rotate(
                    angle: math.pi / 2,
                    child: const Text(
                      'Hello world',
                      style: TextStyle(color: Colors.black),
                    ),
                  ),
                ),
                const Text(
                  '你好',
                  style: TextStyle(color: Colors.green, fontSize: 18),
                ),
              ],
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 16),
              child: const Divider(),
            ),
            const Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                DecoratedBox(
                  decoration: BoxDecoration(color: Colors.red),
                  child: RotatedBox(
                    quarterTurns: 1,
                    child: Text('Hello world'),
                  ),
                ),
                Text(
                  '你好',
                  style: TextStyle(color: Colors.green, fontSize: 18),
                ),
              ],
            ),
            Container(
              margin: const EdgeInsets.symmetric(vertical: 16),
              child: const Divider(),
            ),
            DecoratedBox(
              decoration: const BoxDecoration(color: Colors.red),
              child: Transform.flip(
                flipX: true,
                flipY: true,
                origin: const Offset(20, -5),
                child: const Text('Hello world'),
              ),
            ),
          ],
        ),
      ),
    );
  }
}
